<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商家登录</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
</head>
<body>
<div id="app">
    <h1 style="text-align: center; margin-bottom: 30px;">商家登录</h1>
    <div style="width: 400px;margin-left: 540px;">
        <el-form ref="form" :model="merchant" label-width="80px">
            <el-form-item label="商家名称">
                <el-input v-model="merchant.name"></el-input>
            </el-form-item>
            <el-form-item label="商家密码">
                <el-input type="password" v-model="merchant.password" show-password></el-input>
            </el-form-item>
            <el-form-item>
                <el-input  v-model="merchant.checkCode" type="text" name="checkCode"></el-input>
                <img src="http://localhost:8080/merchant/checkCode" id="checkCode">
                <p @click="changeImg()" style="cursor: pointer">看不清？？？</p>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="login">登录</el-button>
                <!--<el-button @click="popRegister()">注册</el-button>-->
            </el-form-item>
        </el-form>
    </div>

    <!--注册框 start-->
    <div class="add-form">
        <el-dialog title="注册" :visible.sync="dialogFormVisible">
            <el-form ref="dataAddForm" :model="merchant" :rules="rules" label-position="right" label-width="100px">
                <el-row>
                    <!--<el-col :span="12">
                        <el-form-item label="商家ID" prop="merchantId">
                            <el-input v-model="merchant.merchantId"/>
                        </el-form-item>
                    </el-col>-->
                    <el-col :span="12">
                        <el-form-item label="商家名称" prop="name">
                            <el-input v-model="merchant.name"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="商家密码" prop="password">
                            <el-input v-model="merchant.password"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="商家电话" prop="phone">
                            <el-input v-model="merchant.phone"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="商家地址" prop="address">
                            <el-input v-model="merchant.address"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="register()">确定</el-button>
            </div>
        </el-dialog>
    </div>
    <!--注册框 end-->
</div>
</body>

<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>

    var vue = new Vue({
        el: '#app',
        data: {
            merchant: {
                merchantId: '',
                name: '',
                password: '',
                phone: '',
                address: '',
                checkCode: '',
            },
            dialogFormVisible: false,   //控制表单是否可见
        },
        methods: {
            changeImg(){
                //图片路径会被缓存，因此需要使得每次路径都不相同
                var checkCode = document.getElementById("checkCode");
                var seconds = new Date().getMilliseconds();
                checkCode.src = "http://localhost:8080/merchant/checkCode?" + seconds;
            },
            login() {
                var _this = this;
                axios({
                    method : "post",
                    url: "http://localhost:8080/merchant/login",
                    data: _this.merchant
                }).then(function (resp) {
                    if (resp.data.code === 20031){
                        _this.$message.success(resp.data.msg);
                        localStorage.setItem("username",resp.data.data.name);
                        console.log(resp.data.data.name);
                        window.location.href = '/pages/mcommodity.html';
                    }else {
                        _this.$message.error(resp.data.msg);
                    }
                })
            },
            /*弹出注册框*/
            popRegister(){
                this.dialogFormVisible = true;
                this.resetFrom();   /*每次弹窗都清除表单里的内容*/
            },
            resetFrom(){
                this.merchant = {};
            },
            register(){
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/merchant/register",
                    data: _this.merchant
                }).then(function (resp) {
                    if(resp.data.code === 20011){
                        _this.dialogFormVisible = false;
                        _this.$message.success(resp.data.msg);
                    }else if(resp.data.code === 20010){
                        _this.$message.error(resp.data.msg);
                    }else {
                        _this.$message.error(resp.data.msg);
                    }
                })
            }
        },
    });
</script>
</html>